<template>
  <page-header-wrapper>
    <a-card size="small" title="更新日志" style="margin-top: 12px;">
      <div class="timeline-wrapper">
        <div class="timeline" v-for="item in logs" :key="item.id">
          <div class="timeline-left">
            {{ item.createTime }}
          </div>
          <div class="timeline-right">
            {{ item.updateContent }}
          </div>
          <div class="timeline-dot"></div>
        </div>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import { getSysUpdateLogListUsingPOST  } from '@/api/api/shouye.ts'

export default {
  name: 'HomeAllLogs',
  components: {
    PageHeaderWrapper,
  },
  data () {
    return {
      queryParam: {
        pageNo:1,
        pageSize:99999,
      },
      logs: []
    }
  },
  computed: {
  },
  created () {
    getSysUpdateLogListUsingPOST(this.queryParam)
        .then((res) => {
          this.logs = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })

  },
  mounted () {
  },
}
</script>

<style lang="less" scoped>
@import './index.less';
.flex{
  display: flex; 
  justify-content: center;
}
.timeline-wrapper{
  flex: 1;
  overflow-y: auto;
  padding: 15px 5px 0 160px;
  .timeline{
    position: relative;
    height: 50px;
    width: 100%;
    &::before{
      content: '';
      position: absolute;
      left: val(--left);
      width: 1px;
      top: 20px;
      bottom: 0;
      background-image: linear-gradient(to bottom,rgba(144, 156, 173, 0.6) 60%,rgba(255, 255, 255, 0) 0%);
      background-position: left;
      background-size: 1px 5px;
      background-repeat: repeat-y;
    }
    .timeline-left {
      display: block;
      width: calc(var(--left) - 7px);
      position: absolute;
      margin-left: -120px;
      text-align: right;
      width: 100px;
      color: #8492a5;
    } 
    .timeline-right {
      position: relative;
      margin: -3px 0 10px 20px;
    } 
    .timeline-dot {
      left: var(--left);
      width: 7px;
      height: 7px;
      position: absolute;
      border-radius: 50%;
      box-shadow: 0 0 0 1px #d8d8d8;
      background: white;
      text-align: center;
      top: 10px;
      line-height: 40px;
      margin-left: -3.5px;
    } 

  }
}
</style>
